<!--  子表单 - 属性面板 -->
<template>
  <div class="inputAttr">
    <div class="content">
      <div class="title">
        {{ attributeset.lab }}
      </div>
      <div v-if="attributeset.data" class="list">
        <div class="lab">字段标题：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.title"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">关联表单</div>
          <div>
            <t-select-input
              :value="attributeset.data.formName"
              :popup-visible="popupVisible"
              :popup-props="{ overlayInnerStyle: { padding: '6px' } }"
              placeholder="请选择"
              clearable
              allow-input
              size="small"
              @popup-visible-change="onPopupVisibleChange"
              @clear="onClear"
              @input-change="getSubformList"
            >
              <template #panel>
                <ul
                  v-if="subformList.length > 0"
                  class="tdesign-demo__select-input-ul-single"
                >
                  <li
                    v-for="item in subformList"
                    :key="item.id"
                    @click="() => onOptionClick(item)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
                <ul v-else>
                  <li class="t-select__empty">暂无数据</li>
                </ul>
              </template>
              <template #suffixIcon>
                <icon name="chevron-down" size="large" />
              </template>
            </t-select-input>
          </div>
        </div>

        <div class="fx-sb fx-al-ct">
          <div class="lab">是否只读</div>
          <div><t-switch v-model="attributeset.data.isReadOnly" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">列表显示</div>
          <div><t-switch v-model="attributeset.data.listDisplay" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">显示标题</div>
          <div><t-switch v-model="attributeset.data.isShowTitle" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否必填</div>
          <div><t-switch v-model="attributeset.data.isMust" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">唯一值</div>
          <div><t-switch v-model="attributeset.data.isOnly" /></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive, watch } from 'vue'
import { Icon } from 'tdesign-icons-vue-next'
import { formDataes } from '@/api/form'

const props = defineProps({
  arrtData: Object
})

let attributeset = reactive({ ...props.arrtData })

// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])
const popupVisible = ref(false)
const onOptionClick = (item) => {
  attributeset.data.formId = item.id
  attributeset.data.formName = item.name
  getSubformData(item.id)
  // 选中后立即关闭浮层
  popupVisible.value = false
}
const onPopupVisibleChange = (val) => {
  popupVisible.value = val
}
// 获取子表单数据信息
const formData = ref()
const getSubformData = async (id) => {
  const params = {
    id: 'GET_MY_FORM',
    messageAuth: {
      tenant: 'tenant_hiss',
      currentUser: {
        userId: '1',
        userName: '张三',
        userGroups: ''
      }
    },
    palyload: {
      ids: id,
      query: ''
    }
  }
  // const baseData =
  //   '{"baseFormData":{"color":"var(--color-main)","fromType":"0","groupId":13,"icon":"chart-bubble","formTitle":"公章借用申请（带公章外出）1","formDescribe":""},"formData":[{"data":[{"data":{"isExclude":false,"dynamicData":{"method":"","value":"","url":"","key":""},"isMust":false,"defaultValue":"","dataType":"static","width":100,"placeholder":"请选择","isShowTitle":true,"title":"业务线","titlab":["传智短训","传智大学","博学谷","酷丁鱼","传智汇","全业务线","院校","中专业务"],"isShow":false,"excludeOptions":[]},"icon":"icon_xialaxuanze2x","id":36482980055843,"type":"select","lab":"下拉选择框"},{"data":{"errorPrompt":"","defaultValue":"","minLength":"","isStatistics":false,"title":"申请人","defaultWidth":"2","isOnly":false,"isReadOnly":false,"isMust":false,"width":50,"inputType":"","placeholder":"请输入","isShowTitle":true,"maxLength":""},"icon":"icon_danhang2x","id":86248318370377,"type":"input","lab":"单行输入框"},{"data":{"errorPrompt":"","defaultValue":"","minLength":"","isStatistics":false,"title":"部门","defaultWidth":"2","isOnly":false,"isReadOnly":false,"isMust":false,"width":50,"inputType":"","placeholder":"请输入","isShowTitle":true,"maxLength":""},"icon":"icon_danhang2x","id":29265535895364,"type":"input","lab":"单行输入框"},{"data":{"maxValue":"","defaultValueDay":false,"defaultValue":"","title":"申请日期","defaultWidth":100,"isShow":false,"minValue":"","isReadOnly":false,"dateType":"date","isMust":false,"width":100,"placeholder":"选择日期","isShowTitle":true},"icon":"icon_shijianxuanze2x","id":86023029066296,"type":"timeSelect","lab":"日期选择器"},{"data":{"isExclude":false,"dynamicData":{"method":"","value":"","url":"","key":""},"isMust":false,"defaultValue":"","dataType":"static","width":100,"placeholder":"请选择","isShowTitle":true,"title":"资质所属公司","titlab":["江苏传智播客教育科技股份有限公司","北京传智播客教育科技有限公司","江苏传智播客教育科技股份有限公司成都分公司","江苏传智播客教育科技股份有限公司广州分公司","江苏传智播客教育科技股份有限公司哈尔滨分公司","江苏传智播客教育科技股份有限公司济南分公司","江苏传智播客教育科技股份有限公司南京分公司","江苏传智播客教育科技股份有限公司上海分公司","江苏传智播客教育科技股份有限公司深圳分公司","江苏传智播客教育科技股份有限公司武汉分公司","江苏传智播客教育科技股份有限公司西安分公司","江苏传智播客教育科技股份有限公司长沙分公司","江苏传智播客教育科技股份有限公司郑州分公司","江苏传智播客教育科技股份有限公司重庆分公司","江苏传智播客教育科技股份有限公司杭州分公司","江苏传智播客教育科技股份有限公司石家庄分公司","江苏传智播客教育科技股份有限公司北京分公司","郑州传智播客教育科技有限公司","上海传智播客教育培训有限公司","江苏传智播客教育管理咨询有限公司","江苏传智播客教育科技股份有限公司合肥分公司","深圳市传智计算机培训有限公司","江苏传智播客教育科技股份有限公司太原分公司","重庆市沙坪坝区传智计算机培训有限公司","宿迁市传智播客人力资源服务有限公司","西安传智播客教育科技有限公司","北京传智播客教育咨询有限公司","江苏传智播客教育科技股份有限公司厦门分公司","江苏传智播客教育科技股份有限公司顺义分公司","江苏传智播客教育科技股份有限公司北京昌平分公司","江苏传智播客教育管理咨询有限公司北京昌平分公司","北京传智播客教育科技有限公司昌平分公司","南京传智播客计算机培训有限公司","江苏传智播客教育科技股份有限公司沈阳分公司","杭州传智计算机培训有限公司","北京哎呦我趣科技有限公司","宿迁传智专修学院有限公司","武汉东湖新技术开发区传智播客计算机职业培训学校有限公司","合肥市传智播客计算机职业培训学校有限公司","河北传智播客教育科技有限公司","江苏传智播客教育科技股份有限公司高新分公司","江苏传智播客教育科技股份有限公司武汉云计算分公司","江苏传智播客教育科技股份有限公司宝安分公司","西安泰牛职业技能培训学校有限公司","江苏传智播客教育科技股份有限公司天津分公司","天津自贸试验区传智播客培训学校有限公司","长沙高新开发区黑马职业培训学校有限公司","武汉市黄陂区传智播客职业培训学校有限公司","厦门市传智播客职业技能培训学校有限公司","郑州市航空港区传智播客职业技能培训学校有限公司","沈阳市传智播客计算机职业技能培训学校有限公司","石家庄市长安区传智播客职业培训学校有限公司","深圳市宝安区传智播客职业技能培训学校有限公司","天津自贸试验区传智播客培训学校有限公司北京分公司","宿迁传智专修学院有限公司北京昌平分公司","广州市传智播客职业技能培训学校有限公司","成都市金牛区传智职业技能培训学校有限公司","上海传智播客职业技能培训有限公司","北京市传智职业技能培训昌平学校有限公司","大同好学教育科技有限公司","合肥唯学教育科技有限公司","宿迁传智互联网中等职业技术学校有限公司","江苏传智播客教育科技股份有限公司太原第二分公司"],"isShow":false,"excludeOptions":[]},"icon":"icon_xialaxuanze2x","id":75725874578774,"type":"select","lab":"下拉选择框"},{"data":{"isExclude":false,"dynamicData":{"method":"","value":"","url":"","key":""},"defaultValue":[],"dataType":"static","title":"资质类别","isShow":false,"isMust":false,"width":100,"placeholder":"请选择","isShowTitle":true,"titlab":["公司公章","公司合同章","公司人名章","公司财务章"],"excludeOptions":[],"direction":"column"},"icon":"icon_xialaxuanze2x","id":64655044265743,"type":"checkbox","lab":"多选框"},{"data":{"isReadOnly":true,"isMust":false,"defaultValue":"1.只有在借用公章外出时，才需要填写本申请。 2.在资质类文件上加盖公章的，请填写资质合同借用申请。","minLength":"","width":100,"isStatistics":false,"placeholder":"请输入","isShowTitle":true,"title":"备注","maxLength":"","isShow":false},"icon":"icon_duohang2x","id":89635450977580,"type":"textArea","lab":"多行输入框"},{"data":{"isReadOnly":false,"isMust":false,"defaultValue":"","minLength":"","width":100,"isStatistics":false,"placeholder":"请输入","isShowTitle":true,"title":"使用事由","maxLength":"","isShow":false},"icon":"icon_duohang2x","id":27497664086828,"type":"textArea","lab":"多行输入框"},{"data":{"errorPrompt":"","defaultValue":"","minLength":"","isStatistics":false,"title":"业务审批","defaultWidth":"1","isOnly":false,"isReadOnly":false,"isMust":false,"width":100,"inputType":"","placeholder":"请输入","isShowTitle":true,"maxLength":""},"icon":"icon_danhang2x","id":78489485791476,"type":"input","lab":"单行输入框"},{"data":{"errorPrompt":"","defaultValue":"","minLength":"","isStatistics":false,"title":"资质管理审批","defaultWidth":"1","isOnly":false,"isReadOnly":false,"isMust":false,"width":100,"inputType":"","placeholder":"请输入","isShowTitle":true,"maxLength":""},"icon":"icon_danhang2x","id":13347543016930,"type":"input","lab":"单行输入框"},{"data":{"maxValue":"","defaultValueDay":false,"defaultValue":"","title":"归还日期","defaultWidth":100,"isShow":false,"minValue":"","isReadOnly":false,"dateType":"date","isMust":false,"width":100,"placeholder":"选择日期","isShowTitle":true},"icon":"icon_shijianxuanze2x","id":26547582876060,"type":"timeSelect","lab":"日期选择器"},{"data":{"errorPrompt":"","defaultValue":"","minLength":"","isStatistics":false,"title":"归还人","defaultWidth":"1","isOnly":false,"isReadOnly":false,"isMust":false,"width":100,"inputType":"","placeholder":"请输入","isShowTitle":true,"maxLength":""},"icon":"icon_danhang2x","id":73005245403655,"type":"input","lab":"单行输入框"},{"data":{"errorPrompt":"","defaultValue":"","minLength":"","isStatistics":false,"title":"资质归还确认","defaultWidth":"1","isOnly":false,"isReadOnly":false,"isMust":false,"width":100,"inputType":"","placeholder":"请输入","isShowTitle":true,"maxLength":""},"icon":"icon_danhang2x","id":50382762863622,"type":"input","lab":"单行输入框"}],"page":1,"type":1}]}'

  // const context = JSON.parse(baseData)
  // attributeset.data.formData = context.formData[0].data

  await formDataes(params).then((res) => {
    const resData = res.data.res
    const context = JSON.parse(resData[0].context)
    formData.value = context.formData
    attributeset.data.formData = context.formData[0].data
  })
}
// 获取表单列表
const subformList = ref([
  {
    id: '0e51f1cf56550986db6732a3462de3c4',
    createdTime: 1689320963000,
    category: '11',
    tenantId: 'zhyl_app',
    name: '教材领取申请表2',
    version: '1.0.0',
    status: 1
  },
  {
    id: '11bfc759de11ab2806382535c2c6a1bc',
    createdTime: 1689579404000,
    category: '7',
    tenantId: 'zhyl_app',
    name: '个人互联网业务开通申请单1',
    version: '1.0.0',
    status: 1
  },
  {
    id: '34df4546394f08accc0257bcf6863d86',
    createdTime: 1689585286000,
    category: '15',
    tenantId: 'zhyl_app',
    name: '学科设立及定价审批单2',
    version: '1.0.0',
    status: 1
  },
  {
    id: '36d8439635f7a668999eb3e81f338611',
    createdTime: 1689245192000,
    category: '6',
    tenantId: 'zhyl_app',
    name: '博学谷课程采购申请1',
    version: '1.0.0',
    status: 1
  },
  {
    id: '38f598ddd568b3cfac7cbb91c2c3b7ab',
    createdTime: 1689583059000,
    category: '5',
    tenantId: 'zhyl_app',
    name: '定薪调薪申请单-总1',
    version: '1.0.0',
    status: 1
  },
  {
    id: '61c5e5b2dd9dc69b7d05c666b964be76',
    createdTime: 1689327596000,
    category: '9',
    tenantId: 'zhyl_app',
    name: '营销中心文创产品申请单2',
    version: '1.0.0',
    status: 1
  },
  {
    id: '657d2292f51642e380d81774a0aa48a5',
    createdTime: 1689592389000,
    category: '13',
    tenantId: 'zhyl_app',
    name: '公章借用申请（带公章外出）1',
    version: '1.0.0',
    status: 1
  },
  {
    id: '695aae9d7b36a2bb6d3279a99d6f28ec',
    createdTime: 1689586122000,
    category: '14',
    tenantId: 'zhyl_app',
    name: '学员贷款申请单1',
    version: '1.0.0',
    status: 1
  },
  {
    id: '6e278c53db6b13f2b0ebdbf02a1e9afc',
    createdTime: 1689579896000,
    category: '7',
    tenantId: 'zhyl_app',
    name: '服务器申请单1',
    version: '1.0.0',
    status: 1
  },
  {
    id: '73830f9eb6ff7cf1cebffba132c0fbf4',
    createdTime: 1689326116000,
    category: '10',
    tenantId: 'zhyl_app',
    name: '开班计划制定及调整申请单1',
    version: '1.0.0',
    status: 1
  },
  {
    id: '77339c75b717ad89ce6f8fbae6779d86',
    createdTime: 1689583360000,
    category: '5',
    tenantId: 'zhyl_app',
    name: '奖金发放申请单-新2',
    version: '1.0.0',
    status: 1
  },
  {
    id: '92c8ebe96ff6fd0772ef1900b198aa43',
    createdTime: 1689646998000,
    category: '8',
    tenantId: 'zhyl_app',
    name: '顺义-学员退费凭单2',
    version: '1.0.0',
    status: 1
  },
  {
    id: 'a52109e3faf064afebf7c528e85ca8f8',
    createdTime: 1689593954000,
    category: '13',
    tenantId: 'zhyl_app',
    name: '资质合同借用申请（包括资质复印件盖章）111',
    version: '1.0.0',
    status: 1
  },
  {
    id: 'a86237b391877fe4a7f7e7b3f8a117c5',
    createdTime: 1689582301000,
    category: '5',
    tenantId: 'zhyl_app',
    name: '笔记本补助申请单1',
    version: '1.0.0',
    status: 1
  },
  {
    id: 'b4cb3cd83d390d40cda404bb7745b21b',
    createdTime: 1689566099000,
    category: '7',
    tenantId: 'zhyl_app',
    name: '数据库数据申请单1',
    version: '1.0.0',
    status: 1
  },
  {
    id: 'be22c28376cc171f697daee78c95e894',
    createdTime: 1689581682000,
    category: '6',
    tenantId: 'zhyl_app',
    name: '博学谷课程开通申请单2',
    version: '1.0.0',
    status: 1
  },
  {
    id: 'd4b089b0cfd191f16ff0157c6e88d396',
    createdTime: 1689584682000,
    category: '15',
    tenantId: 'zhyl_app',
    name: '开具发票申请单2',
    version: '1.0.0',
    status: 1
  },
  {
    id: 'dd367d7d95745fd01b23947c56f939bb',
    createdTime: 1689320628000,
    category: '12',
    tenantId: 'zhyl_app',
    name: '跨校区授课补助申请单1',
    version: '1.0.0',
    status: 1
  },
  {
    id: 'e51ae5e9f0052eb85def37aa23a866fb',
    createdTime: 1689216714000,
    category: '4',
    tenantId: 'zhyl_app',
    name: '资产领用申请',
    version: '1.0.0',
    status: 1
  },
  {
    id: 'ea6919d0fc1ca08c0d861c5cf1685a17',
    createdTime: 1688994212000,
    category: '1',
    tenantId: 'zhyl_app',
    name: '请假单',
    version: '1.0.0',
    status: 1
  }
])
const getSubformList = async (name?: string) => {
  const params: any = {
    id: 'FORM_MODEL_LIST',
    messageAuth: {
      tenant: 'tenant_hiss',
      currentUser: {
        userId: '1',
        userName: '张三',
        userGroups: ''
      }
    },
    palyload: {
      userAppId: 'zhyl_app',
      size: 999
    }
  }

  if (name) {
    params.palyload.name = name
  }

  await formDataes(params).then((res) => {
    if (res.code === 200) {
      subformList.value = res.data.result.data
    }
  })
}
const onClear = () => {
  attributeset.data.formId = ''
  attributeset.data.formName = ''
}
onMounted(() => {
  // getSubformList()
})
// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)
// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../../index.less" scoped></style>
